<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Rappied Test for Hank</title>
  <link rel="stylesheet" type="text/css" href="./lib/css/rappid.min.css" />
  <link rel="stylesheet" type="text/css" href="./lib/css/bpmn.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <style>
    html, body {
      height: 100%;
    }
    #paper-container {
      height: 800px;
      width: 100%;
    }
    #stencil-container-outer {
      width:100%;
      min-height: 800px;
    }
    #stencil-container-outer .elements {
      text-align: center;
    }
    #toolbar {
      height: 50px;
      width: 100%;
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <a class="navbar-brand" href="#">For Hank</a>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-2">
        <div id="stencil-container-outer"></div>
      </div>
      <div class="col-md-8">
        <div id="paper-container" class="col-md-12"></div>
      </div>
      <div class="col-md-2">
        <div id="diagram-navigator"></div>
        <div id="toolbar" class="col-md-12"></div>
      </div>
    </div>
    
  </div>
  <script src="./lib/js/jquery/dist/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="./lib/js/lodash/index.js"></script>
  <script src="./lib/js/backbone/backbone.js"></script>
  <script src="./lib/js/rappid.min.js"></script>
</body>

</html>